<template>
  <view class="myscorll">
	  <u-card v-for="item in nameList" @click="cardClick(item)" :title="item.title" :sub-title="item.studentName">
	  	<view class="" slot="body" >
	  		<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" style="justify-content: space-between;">
	  			<view class="u-body-item-title u-line-2">{{item.comments}}</view>
	  			<image :src="item.preview" mode="aspectFill"></image>
	  		</view>
	  	</view>
	  </u-card> 
   <!-- <view class="scorll-left">
      <scroll-view scroll-y="true"  class="myscroll-view" >
        <view  v-for="(item,i) in nameList" class="scroll-item" @click="changeShowInfo(item)">{{item.studentName}}</view >
      </scroll-view>
    </view>
    <view class="scorll-right">
      <view class="name-honer">
        {{showInfo.title}}
      </view>
      <view class="synopsis">
		{{showInfo.remark}}
		<view class="">
			<image :src="showInfo.preview" mode=""></image>
		</view>
      <button type="default" class="btn-tosome" @click="todetail(showInfo.rongHeJyinfoId)" >查看详情</button>
      </view>
    </view> -->
  </view>
</template>

<script>
  import{getHonorDetail}from '@/API/honor.js'

  export default {
    data() {
      return {
        // list: mylist,
        nameList: [],
        showInfo: null
        // showInfo:{
        //   name:'孙悟空',
        //   synopsis:"详情",
        // }
      }
    },
    methods: {
      todetail(id){
        
        uni.navigateTo({
          url:`../work-detail/work-detail?id=${id}`
        })
      },
      changeShowInfo(item){
        // console.log(t)
        this.showInfo = item
      },
      async getHonorDetail(id,type) {
       const {data} =  await getHonorDetail(id,{type: type})
       this.nameList = data
	   console.log(this.nameList)
       data[0] &&(this.showInfo = data[0])
      },
	  cardClick(item){
		console.log(item)
	  	uni.navigateTo({
	  		url:'../resource-detail/resource-detail?id=' + item.rongHeJyinfoId + '&type=' + '2'
	  	})
	  }
    },
    onLoad(options) {
      // console.log('option.id,option.type')
      // console.log(options.id,options.type)
      this.getHonorDetail(options.id, options.type)
    }
  }
</script>

<style  lang="scss" scoped>
    .myscorll {
      background-color: #fff;
      height: 100vh;
      width: 100vw;
      display: flex;
	  flex-direction: column;
	  overflow-y: auto;
      .scorll-left{
        width: 280rpx;
        border: 2rpx solid #ddd;
        .myscroll-view {
          height: 100vh;
          background-color: #f5f5f5;
          // background-color: #999;
        }
        .scroll-item{
          height: 80rpx;
          width: 100%;
          background-color: #fff;
          border: 2rpx solid #ddd;
          border-radius: 5rpx;
          text-align: center;
          line-height: 80rpx;
          font-size: 28rpx;
          border-right:2rpx solid #eee ;
          border-bottom:2rpx solid #eee ;
          
        }
      }
      .scorll-right {
        width: 100%;
        // margin: 16rpx 0 0;
        // background-color: #fff;
        .name-honer{
          height: 20vh;
          width: 100%;
          // background-color: #9d8bff;
          font-weight: 700;
          font-size: 48rpx;
          text-align: center;
          line-height: 20vh;
        }
        .synopsis{
          height: 80vh;
          // background-color: skyblue;
          padding: 50rpx 20rpx 30rpx;
          font-size: 32rpx;
          position: relative;
          // border-top: 2rpx solid #ccc;
        .btn-tosome{
         // height: 10vh;
         width: 80%;
         // background-color: red;
         border: 1rpx solid #eee;
         position: absolute;
         bottom:120rpx;
        }
        }
      }
    }
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
		
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
</style>
